<template>
  <div>
<el-card class="box-card">
    <div id="main" ref="main">

    </div>
</el-card>
  </div>
</template>
<script> 
import { getreport } from '@/utils/api'
import * as echarts from 'echarts';
export default {
  name: 'APP',
  data () {
    return {
    }
  },
  methods: {
    report(){
      getreport().then((res)=>{
        // console.log(res.data);
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: '用户来源'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: res.data.legend.data
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: res.data.xAxis[0].data
    }
  ],
  yAxis: [
    {
      type: res.data.yAxis[0].type
    }
  ],
  series: [
    {
      name: '华东',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [2999, 3111, 4100, 3565, 3528, 6000]
    },
    {
      name: '华南',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [5090, 2500, 3400, 6000, 6400, 7800]
    },
    {
      name: '华北',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [6888, 4000, 8010, 12321, 13928, 12984]
    },
    {
      name: '西部',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [9991, 4130, 7777, 12903, 13098, 14028]
    },
    {
      name: '其他',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [15212, 5800, 10241, 14821, 15982, 14091]
    }
  ]
};

option && myChart.setOption(option);
      })
    }
    
    

  },
  created () {
  },
  mounted () {
    this.report()
  },
}
</script>
<style lang="scss" scoped>
#main{
  width: 100%;
  height: 500px;
}
</style>
